<style scoped>
</style>

<template>
  <div>
    <Modal v-model="IsModalShow" title="解绑" :mask-closable="false" @on-cancel="cancel" width="500">
      <div>
        <Tag
          v-for="item in deviceList"
          :key="item.devId"
          :name="item.devName"
          color="warning"
          type="dot"
        >{{item.imei}}</Tag>
      </div>

      <div slot="footer">
        <Button type="default" @click="cancel">关闭</Button>
        <Button type="primary" :loading="loading" @click="save">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { getShopSelections, unbindShop } from "@/api/asset";
export default {
  props: {
    parentDeviceList: {
      type: Array,
      default: function() {
        return [];
      }
    },
    modalShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      IsModalShow: false,
      deviceList: [],
      loading: false,
      deptId: 0
    };
  },
  watch: {
    modalShow(curVal, oldVal) {
      if (curVal) {
        this.deviceList = JSON.parse(JSON.stringify(this.parentDeviceList));
      }
      this.IsModalShow = curVal;
    }
  },
  created() {},
  mounted() {},
  methods: {
    cancel() {
      this.$emit("listenModal");
    },
    async save() {
      this.loading = true;
      let devIds = this.deviceList
        .map(item => {
          return item.devId;
        })
        .join(",");

      let params = {
        devIds: devIds
      };

      try {
        let result = await unbindShop(params);

        if (result.code == 0) {
          this.$Message.success("解绑成功!");
          this.$emit("listenModal");
          this.$emit("refreshTableList");
        } else {
          this.$Message.error(result.msg);
        }
      } catch (e) {
        this.$Message.error("服务器异常，稍后再试");
      }
      this.loading = false;
    }
  }
};
</script>
<style lang="less" scoped>
.split {
  border: 1px solid #dcdee2;
  height: 540px;
}
.split-pane-left {
  padding: 20px 10px;
  height: 100%;
}
.split-pane-right {
  padding: 20px 20px;
}
</style>

